/**
* 溢出省略号
* @param {Number} 行数
*/
@mixin ellipsis($rowCount: 1) {
	@if $rowCount <=1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	@else {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: $rowCount;
		-webkit-box-orient: vertical;
	}
}

/**
* 真.1px边框
* {List}: 多个方向边框, 默认值为bottom, 你可以根据需要传入(top, left, bottom, right) 4个方向;
* {Color} 边框的颜色, 默认#ccc;
* {List} 4个圆角半径, 默认0;
* {String} 一个高级设置, 一般都不需要改动, 由于细边框的实现使用了css的伪类, 所以为了规避可能出现的样式冲突, 我们可以自己指定使用:after还是:before, 默认after;
*/
@mixin thinBorder($directionMaps: bottom,
	$color: #ccc,
	$radius: (0,
		0,
		0,
		0),
	$position: after) {
	// 是否只有一个方向
	$isOnlyOneDir: string==type-of($directionMaps);

	@if ($isOnlyOneDir) {
		$directionMaps: ($directionMaps);
	}

	@each $directionMap in $directionMaps {
		border-#{$directionMap}: 1px solid $color;
	}

	// 判断圆角是list还是number
	@if (list==type-of($radius)) {
		border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4);
	}

	@else {
		border-radius: $radius;
	}

	@media only screen and (-webkit-min-device-pixel-ratio: 2) {
		& {
			position: relative;

			// 删除1像素密度比下的边框
			@each $directionMap in $directionMaps {
				border-#{$directionMap}: none;
			}
		}

		&:#{$position} {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 200%;
			height: 200%;
			transform: scale(0.5);
			box-sizing: border-box;
			padding: 1px;
			transform-origin: 0 0;
			pointer-events: none;
			border: 0 solid $color;

			@each $directionMap in $directionMaps {
				border-#{$directionMap}-width: 1px;
			}

			// 判断圆角是list还是number
			@if (list==type-of($radius)) {
				border-radius: nth($radius, 1) * 2 nth($radius, 2) * 2 nth($radius, 3) * 2 nth($radius, 4) * 2;
			}

			@else {
				border-radius: $radius * 2;
			}
		}
	}

	@media only screen and (-webkit-min-device-pixel-ratio: 3) {
		&:#{$position} {

			// 判断圆角是list还是number
			@if (list==type-of($radius)) {
				border-radius: nth($radius, 1) * 3 nth($radius, 2) * 3 nth($radius, 3) * 3 nth($radius, 4) * 3;
			}

			@else {
				border-radius: $radius * 3;
			}

			width: 300%;
			height: 300%;
			transform: scale(0.3333);
		}
	}
}

//文本居中
@mixin center($height:100%) {
	height: $height;
	line-height: $height;
	text-align: center
}

// 三角形
@mixin triangle($width: 4px, $color: #000) {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: middle;
	border-top: $width solid $color;
	border-left: $width solid transparent;
	border-right: $width solid transparent;
}

// 清除浮动
@mixin clearfix {
	*zoom: 1;

	&:after {
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
}

// 控制用户是否可以选中文本
@mixin utils-user-select($value) {
	-webkit-user-select: $value;
	-moz-user-select: $value;
	-ms-user-select: $value;
}

//背景图片
@mixin bg-image($url) {
	background-image: url($url + "@2x.png");

	@media (-webkit-min-device-pixel-ratio: 3),
	(min-device-pixel-ratio: 3) {
		background-image: url($url + "@3x.png");
	}
}

// 透明度
@mixin opacity($opacity) {
	opacity: $opacity;
	$opacity-ie: $opacity * 100;
	filter: alpha(opacity=$opacity-ie); //IE8
}

//美化占位符 placeholder 样式
@mixin beauty-placeholder($fz, $color: #999, $align: left) {
	&:-moz-placeholder {
		font-size: $fz;
		color: $color;
		text-align: $align;
	}

	&:-ms-input-placeholder {
		font-size: $fz;
		color: $color;
		text-align: $align;
	}

	&::-webkit-input-placeholder {
		font-size: $fz;
		color: $color;
		text-align: $align;
	}
}

//美化文本的选中
@mixin beauty-select($color, $bgcolor) {
	&::selection {
		color: $color;
		background-color: $bgcolor;
	}
}

/**
* 等边三角形
* @param {String} 尺寸
* @param {Color} 颜色
* @param {String} 方向
*/
@mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) {
	width: 0;
	height: 0;
	border-style: solid;

	@if (bottom==$dir) {
		border-width: $size $size 0 $size;
		border-color: $color transparent transparent transparent;
	}

	@else if (top==$dir) {
		border-width: 0 $size $size $size;
		border-color: transparent transparent $color transparent;
	}

	@else if (right==$dir) {
		border-width: $size 0 $size $size;
		border-color: transparent transparent transparent $color;
	}

	@else if (left==$dir) {
		border-width: $size $size $size 0;
		border-color: transparent $color transparent transparent;
	}
}

/**
* flex剧中
*/
@mixin flexCenter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/**
* 圆
*/
@mixin circle($diameter){
	width:$diameter;
	height: $diameter;
	border-radius: 50%;
}